<template>
	<div class="position-relative" :style="{ width: currentWidth(), height: currentHeight() }">
		<img
			:style="{ width: currentWidth(), height: currentHeight() }"
			:src="src"
			:class="`${loaded ? 'opacity-100 loaded' : 'opacity-0'}`"
			@load="loaded = true"
		/>
		<img
			v-if="!loaded"
			class="position-absolute start-0 top-0"
			:src="defaultArtistCover"
			:style="{ width: currentWidth(), height: currentHeight() }"
		/>
	</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default defineComponent({
	props: {
		width: {
			type: [Number, String],
		},
		height: {
			type: [Number, String],
		},
		src: {
			type: String,
		},
	},
	setup(props) {
		const store = useStore();
		const state = reactive({
			loaded: false,
			defaultArtistCover: store.state.defaultMusicCover,
		});
		const isNumber = (val) => /^\d+$/.test(val);
		const currentWidth = () => {
			const { width } = props;
			return isNumber(width) ? `${width}px` : width;
		};
		const currentHeight = () => {
			const { height } = props;
			return isNumber(height) ? `${height}px` : height;
		};
		return {
			...toRefs(state),
			console,
			currentWidth,
			currentHeight,
		};
	},
});
</script>

<style lang="scss">
.loaded {
	animation: loaded ease-in-out 0.4s;
}
@keyframes loaded {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
</style>
